<template>
	<view>
		<cu-custom bgColor="bg-cyan" isBack>
			<block slot="content">picker,选择列表</block>
		</cu-custom>
		<view class="smart-padding-wrap">
			<view class="uni-title">普通选择器</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">当前选择</view>
					<view class="uni-list-cell-db">
						<picker :range="array" :value="index" range-key="name" @change="bindPickerChange">
							<view class="uni-input">{{array[index].name}}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="uni-title">日期选择器</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">当前选择</view>
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date()
		let year = date.getFullYear()
		let month = date.getMonth() + 1
		let day = date.getDay()
		if (type == 'start') {
			year = year - 60;
		} else if (type == 'end') {
			year = year + 2
		}
		month = month > 9 ? month : "0" + month
		day = day > 9 ? day : "0" + day
		return `${year}-${month}-${day}`
	}
	export default {
		data() {
			return {
				array: [{
					name: '中国'
				}, {
					name: '美国'
				}, {
					name: '日本'
				}, {
					name: '巴西'
				}],
				index: 0,
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
			}
		},
		methods: {
			bindPickerChange(e) {
				console.log("显示打印结果", e.detail);
				this.index = e.detail.value;
			},
			bindDateChange(e) {
				this.date = e.detail.value
			}
		}
	}
</script>

<style scoped>
	.uni-title {
		font-size: 30rpx;
		font-weight: blod;
		padding: 10px 0;
		line-height: 1.5;
	}

	.uni-list {
		background-color: #fff;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-cell-db,
	.uni-list-cell-right {
		flex: 1;
	}

	.uni-list-cell-left {
		white-space: nowrap;
		font-size: 14px;
		padding: 0 15px;
	}

	.uni-input {
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background-color: #fff;
		flex: 1
	}
</style>
